<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>详情</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/style/custom.css}" media="all">
</head>
<body>

<div class="layui-tab">
  <input type="hidden" id="processInstId" name="processInstId" th:value="${processInstId}">
  <ul class="layui-tab-title">
    <li class="layui-this">流转信息</li>
    <li>流程信息</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <div class="layui-card-body">
        <div class="layui-btn-group" style="padding-bottom: 10px;">
          <!--刷新table-->
          <button type="button" class="layui-btn layui-btn-normal btn-op-task layui-btn-sm" data-type="refresh">
            <i class="layui-icon">&#xe666;</i>刷新
          </button>
        </div>

        <!--table 定义-->
        <table id="LAY-task-his-table" lay-filter="LAY-task-his-table"></table>
      </div>
    </div>
    <div class="layui-tab-item">
      <img id="instImg" src="" />
    </div>
  </div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script>
  layui.config({
    base: '/'
  }).extend({
    //设定模块别名，模块名是使用layui.模块名  模块文件是 js名字。不设置模块名 = 模块文件名
    flying: 'flying'
  }).use(['index', 'flying'], function(){
    const $ = layui.$
        ,admin = layui.admin
        ,form = layui.form
        ,table = layui.table
        ,layer = layui.layer
        ,dropdown = layui.dropdown
        ,flying = layui.flying;

    flying.table({
      elem: '#LAY-task-his-table',
      url: '/flow/task/his/list', //数据接口
      where: {
        processInstId: layui.$("#processInstId").val()
      },
      cols: [
        {type: 'numbers', fixed: 'left', title: '序号'}
        , {field: 'taskName', title: '任务节点名称', minWidth: 150,}
        , {field: 'userName', title: '任务处理人', width: 100}
        , {field: 'claimTime', title: '领取时间', templet: '<div>{{ layui.util.toDateString(d.claimTime, "yyyy-MM-dd HH:mm:ss") }}</div>',  minWidth: 170, sort: true, hide: true}
        , {field: 'startTime', title: '开始时间', templet: '<div>{{ layui.util.toDateString(d.startTime, "yyyy-MM-dd HH:mm:ss") }}</div>',  minWidth: 170, sort: true}
        , {field: 'endTime', title: '结束时间', templet: '<div>{{ layui.util.toDateString(d.endTime, "yyyy-MM-dd HH:mm:ss") }}</div>',  minWidth: 170, sort: true}
        , {field: 'duration', title: '持续时间', templet: function (d) {
            return flying.formatDuration(d.duration);
          }, width: 180}
        , {field: 'result', title: '审批状态', templet: function (d) {
            if (d.result === 'A') {
              return '同意';
            } else if (d.result === 'R') {
              return '拒绝';
            } else if (d.result === 'D') {
              return '驳回';
            } else if (d.result === 'W') {
              return '委托';
            } else {
              return '未知';
            }
          }, minWidth: 100}
        , {field: 'remark', title: '审批信息', minWidth: 150}
      ],
      page: 'false'
    });

    //事件
    let active = {
      refresh: function () {
        //执行重载 数据刷新
        table.reload('LAY-task-his-table');
      }
    };

    //执行事件操作
    layui.$('.layui-btn.btn-op-task').on('click', function () {
      let type = layui.$(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    let windowUrl = window.URL || window.webkitURL;//处理浏览器兼容性
    let xhr = new XMLHttpRequest();
    xhr.open("GET", '/flow/instance/process/image?processInstId=' + layui.$("#processInstId").val(), true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        let blob = this.response;
        let imgUrl = windowUrl.createObjectURL(blob);
        document.getElementById('instImg').src = imgUrl;
        // URL.revokeObjectURL(imgUrl);
      }
    }
    xhr.send();

  });
</script>
</body>
</html>
